<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Connect to Solana Wallet</title>
  <!-- Solana wallet adapter library -->
  <script src="https://cdn.jsdelivr.net/npm/@solana/wallet-adapter@1.0.0-rc.6"></script>
  <script src="https://cdn.jsdelivr.net/npm/@solana/wallet-adapter-walletconnect@1"></script>
</head>
<body>
<h1>Connect to Solana Wallet</h1>
<button id="connectButton">Connect to Solana Wallet</button>

<script>
  document.getElementById("connectButton").addEventListener("click", async function() {
    // Initialize WalletConnect adapter
    const walletConnectAdapter = new WalletConnectAdapter({
      // Solana network
      network: "https://api.devnet.solana.com",
      // Your app's name
      appName: "YourAppName",
      // WalletConnect bridge options
      bridge: {
        // Optional: Bridge URL
        url: "https://bridge.walletconnect.org",
        // Optional: Bridge polling interval in milliseconds
        pollingInterval: 15000,
        // Optional: Bridge qrcode modal configuration
        qrcodeModalOptions: {
          mobileLinks: [
            "rainbow",
            "metamask",
            "argent"
          ]
        }
      }
    });

    // Connect to Solana wallet
    await walletConnectAdapter.connect();

    // Once connected, you can perform Solana-related operations
    console.log("Connected to Solana wallet");
  });
</script>
</body>
</html>
